Next가 최적화에 꿀인 이유, (with. Image 컴포넌트)

특정 페이지에서 다수의 이미지를 서빙해야 한다고 가정하자. 이 경우, 이미지를 최적화 하는 것만으로도 웹 성능을 크게 개선할수 있을 것이다. 이미지 리사이징, 포맷 변환으로 이미지의 파일 크기를 대폭 줄일 수 있기 때문이다.

이러한 이미지 최적화를 어떻게 진행할까? React와 Next와의 비교를 통해 알아보자

먼저, React의 경우는 자체적으로 이미지 포맷을 변환하거나 리사이징하는 기능이 내장되어 있지 않다.

그렇다면 이를 해결하기 위해선 다음과 같은 방법을 생각할 수 있다.

1. 클라이언트 사이드에서 라이브러리로 이미지 포맷을 변환 후 스토리지에 업로드한다
2. 서버 사이드에서 이미지를 변환하여 제공한다.
3. 클라우드 서비스(Cloudflare Images 등)를 활용한다.

1,2번 둘다 비용이 매우 크다

그렇다면 스토리지에

있다고 하더라도, 클라이언트 사이드에서 리사이징 및 이미지 포맷을 변환해서